<template>
  <div
    class="table-btns"
    :class="[`btns_${column.align || 'left'}`, column.class]"
  >
    <div v-for="(btn, i) in showBtns" class="table-btns-item" :key="`btn_${i}`">
      <el-popconfirm
        v-if="btn.confirm"
        :title="
          btn.confirmTitle ||
          (btn.confirmAttrs && btn.confirmAttrs.title) ||
          `确认要${btn.title}吗？`
        "
        :icon-color="
          (btn.confirmAttrs && btn.confirmAttrs['icon-color']) || '#FF4C4C'
        "
        :icon="(btn.confirmAttrs && btn.confirmAttrs.icon) || 'el-icon-warning'"
        v-bind="btn.confirmAttrs"
        cancel-button-type="default"
        @confirm="btn.click(row)"
      >
        <el-button
          slot="reference"
          :style="`color: ${btn.disabled ? '' : btn.color || ''}`"
          :class="btn.class"
          type="text"
          :disabled="btn.disabled"
        >
          <span v-if="btn.icon" class="vulfont" :class="[btn.icon]"></span>
          <span v-else>{{ btn.title }}</span>
        </el-button>
      </el-popconfirm>
      <el-button
        v-else
        :style="`color: ${btn.disabled ? '' : btn.color || ''}`"
        :class="btn.class"
        type="text"
        :disabled="btn.disabled"
        @click="btn.click(row)"
      >
        <span v-if="btn.icon" class="vulfont" :class="[btn.icon]"></span>
        <span v-else>{{ btn.title }}</span>
      </el-button>
    </div>
    <el-popover
      v-if="showMore"
      popper-class="table-btns-more-popper"
      trigger="click"
    >
      <div class="table-btns-more-container">
        <div
          v-for="(btn, i) in restBtns"
          :style="i > 0 ? 'margin-top: 6px;' : ''"
          :key="`btn_${i}`"
        >
          <el-popconfirm
            v-if="btn.confirm"
            :title="
              btn.confirmTitle ||
              (btn.confirmAttrs && btn.confirmAttrs.title) ||
              `确认要${btn.title}吗？`
            "
            :icon-color="
              (btn.confirmAttrs && btn.confirmAttrs['icon-color']) || '#FF4C4C'
            "
            :icon="
              (btn.confirmAttrs && btn.confirmAttrs.icon) || 'el-icon-warning'
            "
            v-bind="btn.confirmAttrs"
            cancel-button-type="default"
            @confirm="btn.click(row)"
          >
            <el-button
              :style="`color: ${btn.disabled ? '' : btn.color || ''}`"
              :class="btn.class"
              slot="reference"
              type="text"
              :disabled="btn.disabled"
            >
              <span v-if="btn.icon" class="vulfont" :class="[btn.icon]"></span>
              <span v-else>{{ btn.title }}</span>
            </el-button>
          </el-popconfirm>
          <el-button
            v-else
            :style="`color: ${btn.disabled ? '' : btn.color || ''}`"
            :class="btn.class"
            type="text"
            :disabled="btn.disabled"
            @click="btn.click(row)"
          >
            <span v-if="btn.icon" class="vulfont" :class="[btn.icon]"></span>
            <span v-else>{{ btn.title }}</span>
          </el-button>
        </div>
      </div>
      <div slot="reference" class="table-btns-more"></div>
    </el-popover>
  </div>
</template>
<script lang="ts" setup>
import {defineProps,ref,computed,watch,onMounted} from 'vue';
const props=defineProps({
  row: Object,
    renderButtons: Function,
    column: Object as any,
})
const btns=ref<any>([]);
  watch(()=>props.row,(n, o)=>{
    initBtns();
  },
  {
    deep: true,
  }
  )
  const showBtns=computed(()=>{
    return btns.value.slice(0, 4);
  })
  const showMore=computed(()=>{
    return btns.value.length > 4;
  })
  const restBtns=computed(()=>{
    return btns.value.slice(4);
  })
  onMounted(()=>{
    initBtns();
  })
 const initBtns=()=> {
      if (!props.row || !props.renderButtons) return;
      btns.value = props.renderButtons(props.row).filter((el) => !el.isHide);
    }
</script>
<style scoped>
.table-btns {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.table-btns.btns_center {
  justify-content: center;
}

.table-btns.btns_right {
  justify-content: flex-end;
}

.table-btns-item:not(:last-child) {
  margin-right: 10px;
}

.table-btns-more {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10px;
  height: 100%;
  cursor: pointer;
}

.table-btns-more::after {
  content: "";
  width: 2px;
  height: 12px;
  background: radial-gradient(#8393ac, #8393ac) top center/2px 2px no-repeat,
    radial-gradient(#8393ac, #8393ac) center center/2px 2px no-repeat,
    radial-gradient(#8393ac, #8393ac) bottom center/2px 2px no-repeat;
}

.table-btns-more-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.el-button--text {
  min-width: none;
}
</style>

<style>
.table-btns-more-popper {
  min-width: 50px !important;
}
</style>
